<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        /* 图片区域 */
        
        .preview_img {
            position: relative;
            width: 398px;
            height: 398px;
            border: 1px solid #ccc;
        }
        
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: burlywood;
            opacity: 0.5;
        }
        
        .big {
            position: absolute;
            top: 0;
            left: 500px;
            border: 1px solid #ccc;
            width: 500px;
            height: 600px;
            overflow: hidden;
            z-index: 999;
        }
        
        .bigIMg {
            position: absolute;
        }
    </style>
</head>

<body>
    <!-- 图片预览区域 -->
    <div class="preview_img">
        <!-- 图片 -->
        <img src="images/phone.png" alt="">
        <!-- 放大镜 -->
        <div class="mask"></div>
        <!-- 展示放大后图片效果 -->
        <div class="big">
            <img src="images/bigphone.png" alt="" class="bigIMg">
        </div>
    </div>
    <!-- <script src="js/big.js"></script> -->
    <script>
        //鼠标放上img 放大镜和放大图片 显示
        $(function() {
            $(".preview_img").on("mouseover", function() {
                    // $(".mask").css("display", "block");
                    // $(".big").css("display", "block");
                    $(".mask").show();
                    $(".big").show(); // 显示
                })
                // 鼠标离开img 放大镜和放大图片 显示
            $(".preview_img").on("mouseout", function() {
                    // $(".mask").css("display", "none");
                    // $(".big").css("display", "none");
                    $(".mask").hide();
                    $(".big").hide(); // 隐藏
                })
                //放大镜在图片里移动 
                // $(".preview_img").on("mouseover", function(e) {
                //     var x = e.pageX - $(this).offset().left - $(".mask").width() / 2;
                //     var y = e.pageY - $(this).offset().top - $(".mask").height() / 2;

            //     var width = $(this).width() - $(".mask").width();
            //     var height = $(this).height() - $(".mask").height();
            //     if (x < 0) {
            //         x = 0;
            //     } else if (x > width) {
            //         x = width;
            //     }
            //     if (y < 0) {
            //         y = 0;
            //     } else if (y > height) {
            //         y = height;
            //     }
            //     //放到判断条件后面
            //     $(".mask").css({
            //             left: x + 'px',
            //             top: y + 'px'
            //         })
            //         //  大图片跟随  
            //     var bigMax = $(".bigIMg").width() - $(".big").width();
            //     var bigX = x * bigMax / width;
            //     var bigY = y * bigMax / height;
            //     $(".bigIMg").css({
            //         left: -bigX + 'px',
            //         top: -bigY + 'px'
            //     })
            // })

            // 鼠标移动事件  鼠标移入  鼠标移出  鼠标移动           

            $(".preview_img").on("mousemove", function(e) {
                var x = e.pageX - $(this).offset().left - $(".mask").width() / 2;
                var y = e.pageY - $(this).offset().top - $(".mask").height() / 2;

                var width = $(this).width() - $(".mask").width(); //最大移动宽度
                var height = $(this).height() - $(".mask").height(); //最大移动高度

                if (x < 0) {
                    x = 0;
                } else if (x > width) {
                    x = width;
                }

                if (y < 0) {
                    y = 0;
                } else if (y > height) {
                    y = height;
                }

                $(".mask").css({
                    left: x + 'px',
                    top: y + 'px'
                })

                var bigMaxX = $(".bigIMg").width() - $(".big").width(); // 大图片最大移动距离
                var bigMaxY = $(".bigIMg").height() - $(".big").height();

                var bigX = x * bigMaxX / width; // 大图片移动的距离
                var bigY = y * bigMaxY / height;
                $(".bigIMg").css({
                    left: -bigX + 'px',
                    top: -bigY + 'px'
                })
            })


        })
    </script>
</body>

</html>